<!--
双伪元素
    - 给父元素添加
    - 相当于一前一后两堵墙，形成真正的闭合
优缺
    - 代码相对于单个::after时更简洁
    - 需要照顾低版本浏览器
代表网站
    小米、腾讯等
-->
<style>
    /* ------------------------------ */
    .clearfix::before,
    .clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    /* ------------------------------ */
    .one {
        float: left;
        width: 100px;
        height: 100px;
        background: red;
    }
    .two {
        float: left;
        width: 200px;
        height: 200px;
        background: orange;
    }
    .three {
        height: 300px;
        background: skyblue;
    }
</style>

<!-- 父盒子挂上类名 -->
<div class="box clearfix">
    <div class="one">浮</div>
    <div class="two">浮</div>
</div>
<div class="three">后面来的标准流块盒子</div>